<template>
  <div class="app-container">
    <el-select filterable allow-create class="main-select-tree" @change = changeValue ref="selectTree" v-model="value"  style="width: 140px;">
      <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value" style="display: none;" />
      <el-tree class="main-select-el-tree" ref="selecteltree"
               :data="options"
               node-key="id"
               highlight-current
               :props="defaultProps"
               @node-click="handleNodeClick"
               :current-node-key="value"
               :expand-on-click-node="expandOnClickNode"
               default-expand-all />
    </el-select>
  </div>
</template>

<script>
export default {
  name:"selectTree",
  props:["options","scopeRow","scopeType"],
  data() {
    return {
      value: "",
      expandOnClickNode: true,
      options:[],
      datas: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    changeValue(val){
      if(this.scopeType == "params"){
        this.scopeRow.paramsName = val;
      }
      if(this.scopeType == "header"){
        this.scopeRow.headerName = val;
      }
    },

    handleNodeClick(node){
      this.value = node.label;
      this.$refs.selectTree.blur();
      if(this.scopeType == "params"){
        this.scopeRow.paramsName = node.label;
        this.scopeRow.paramsType = node.value;
      }
      if(this.scopeType == "header"){
        this.scopeRow.headerName = node.label;
        this.scopeRow.headerType = node.value;
     }
      this.$emit("selectNode",node)
    }
  }
}
</script>
<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
</style>
